<template>
  <div class="found">
    <div class="header">
      <el-select v-model="schoolCode" filterable @change="selectSchool" class="m-2" placeholder="选择学校" size="large">
        <el-option
          v-for="item in schoolList"
          :key="item.schoolCode"
          :label="item.schoolName"
          :value="item.schoolCode"
        />
      </el-select>
      <el-select v-model="collegeName" @change="collegeChange" class="m-2" placeholder="选择学院" size="large" :disabled="!schoolCode">
        <el-option
          v-for="item in collegeList"
          :key="item.collegeName"
          :label="item.collegeName"
          :value="item.collegeName"
        />
      </el-select>
      <el-select v-model="learnType" @change="learnTypeChange" class="m-2" placeholder="学习方式" size="large" :disabled="!collegeName" style="width: 120px;">
        <el-option
          v-for="item in learnTypeOption"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
      <el-select v-model="majorName" class="m-2" placeholder="专业" size="large" :disabled="!learnType" @change="selectMajor">
        <el-option
          v-for="item in majorList"
          :key="item.majorCode"
          :label="item.majorName"
          :value="item.majorCode"
        />
      </el-select>
			<el-button type="primary" color="#ff7214" @click="handleSearch" size="large">查询院校</el-button>
    </div>
    <div class="list" v-loading="loading" element-loading-text="数据加载中...">
      <ListItem v-if="!loading" :data="listData"></ListItem>
			<!-- <Pagination></Pagination> -->
    </div>
  </div>
</template>
<script setup>
import {ref,onMounted} from 'vue'
import { useRouter } from 'vue-router'
import ListItem from '@/components/listItem/ListItem.vue'
import Pagination from '@/components/pagination/Pagination'
import {decrypt} from '@/utils/parseDate'
import {found,school,college,major} from '@/api/api'
import { ElMessage } from 'element-plus'
const router = useRouter()
const pageNum = ref(1)
const pageSize = ref(10)
// 切换状态
const loading = ref(false)
// 选中的学校
const schoolCode = ref('')
// 学校列表
const schoolList = ref([])
// 学院名字
const collegeName = ref('')
// 学院列表
const collegeList = ref([])
// 专业名字
const majorName = ref('')
// 专业列表
const majorList = ref([])
// 学习方式
const learnType = ref('')
// 列表数据
const listData = ref([])
const learnTypeOption = ref([
  {
    label: '全日制',
    value: 1
  },
  {
    label: '非全日制',
    value: 2
  }
])
// 学习方式改变
function learnTypeChange(val){
	learnType.value = val
	majorName.value = ''
	majorList.value = []
	getMajor()
}
// 获取学校列表
async function getSchool(){
	try {
		const result = await school()
		const res = JSON.parse(decrypt(result))
		schoolList.value = res.result
	} catch (error) {
		// throw new Error(error)
	}
}
// 选择学校
function selectSchool(val){
	schoolCode.value = val
	collegeName.value = ''
	collegeList.value = []
	learnType.value = ''
	majorName.value = ''
	majorList.value = []
	getCollege()
}
// 根据学校获取学院
async function getCollege(){
	try {
		if(!schoolCode.value){
			return
		}
		const data = {
			schoolCode: schoolCode.value
		}
		const result = await college(data)
		const res = JSON.parse(decrypt(result))
		collegeList.value = res.result
	} catch (error) {
		// throw new Error(error)
	}
}
// 切换学院
function collegeChange(val){
	collegeName.value = val
	learnType.value = ''
	majorName.value = ''
	majorList.value = []
}
// 根据学校学院获取专业
async function getMajor(){
	try {
		const data = {
			collegeName: collegeName.value,
			schoolCode: schoolCode.value
		}
		const result = await major(data)
		const res = JSON.parse(decrypt(result))
    if(learnType.value === 1){
			if(res.result.fullTime.length>0){
				res.result.fullTime.forEach(ele=>{
					ele.learningStyleName='全日制'
					if(ele.schoolTag){
						ele.schoolTag = ele.schoolTag.split('|')
					}
				})
			}
      majorList.value = res.result.fullTime
    } else {
			if(res.result.noneFullTime.length>0){
				res.result.noneFullTime.forEach(ele=>{
					ele.learningStyleName='非全日制'
					if(ele.schoolTag){
						ele.schoolTag = ele.schoolTag.split('|')
					}
				})
			}
      majorList.value = res.result.noneFullTime || []
    }
	} catch (error) {
		// throw new Error(error)
	}
}
// 查询院校
function handleSearch(){
	loading.value = true
	const arr = majorList.value.slice()
	const res = arr.filter(ele=>ele.majorCode === majorName.value)
	college
	listData.value = res
	loading.value = false
}
// 选择专业
function selectMajor(val){
}
// 默认查找
async function getDefault(flag){
	try {
		loading.value = true
		const data = {
			collegeName: '光华管理学院',
			schoolCode: '10001'
		}
		const result = await major(data)
		const res = JSON.parse(decrypt(result))
		if(res.status === 0){
			const arr = []
			if(res.result.fullTime.length>0){
				res.result.fullTime.forEach(ele=>ele.learningStyleName='全日制')
				arr.push(...res.result.fullTime)
			}
			if(res.result.noneFullTime.length>0){
				res.result.noneFullTime.forEach(ele=>ele.learningStyleName='非全日制')
				arr.push(...res.result.noneFullTime)
			}
			arr.forEach(ele=>{
				if(ele.schoolTag){
          ele.schoolTag = ele.schoolTag.split('|')
        }
        ele.checked = false
			})
			listData.value = flag? listData.value.concat(arr) : arr
		}
		loading.value = false
	} catch (error) {
		// throw new Error(error)
	}
}
onMounted(()=>{
	getDefault()
	getSchool()
})
</script>
<style scoped lang="less">
.found{
  box-sizing: border-box;
	padding-top: 16px;
	height: 100%;
	width: 100%;
  .header{
		display: flex;
		height: 54px;
		padding: 0 calc((100vw - 1200px)/2);
		min-width: 1200px;
    .el-select{
			margin-bottom: 16px;
			width: 180px;
       margin-right: 10px;
    }
		.el-button{
			color: #fff;
			width: 80px;
		}
  }
	.list{
		padding: 0 calc((100vw - 1200px)/2);
		min-width: 1200px;
		height: calc(100% - 54px);
		overflow: auto;
	}
}
</style>
